<script lang="ts" setup>
import type { FlowExportObject } from "@vue-flow/core";

const props = defineProps<{
  cid: number;
}>();

const toast = useToast();
const dayjs = useDayjs();
const userStore = useMyUserStore();
const commentStore = useMyCommentStore();
const withFlow = computed(() => commentStore.sharedFLowObj !== null);

const comments = ref<CommentPostType[]>([]);
const comment = ref<CommentType>({
  ciid: 0,
  text: "",
  with_flow: false,
  flow: null,
});
const commentsCount = computed(() => comments.value.length + 1);

watch(comments, (c) => {
  commentStore.addComments(props.cid, c);
});
onMounted(() => {
  comments.value = commentStore.getComments(props.cid);
});

const addComment = () => {
  if (comment.value.text === "") {
    toast.add({
      id: "4782",
      title: "评论不能为空",
      timeout: 1500,
      color: "yellow",
      icon: "i-heroicons-exclamation-circle",
    });
    return;
  }
  comments.value.push({
    ...comment.value,
    like: 0,
    post_date: dayjs(Date.now()).local().format("YYYY-MM-DD / HH:mm:ss"),
    ciid: commentsCount.value,
    // flow
    with_flow: withFlow.value,
    flow: commentStore.sharedFLowObj,
  });
  comment.value = { text: "", ciid: 0, with_flow: false, flow: null };
  commentStore.doClearSharedFlowObj();
  toast.add({ id: "5467", title: "评论成功", timeout: 1500 });
};

const doJumpToFlow = (src: FlowExportObject = commentStore.sharedFLowObj!) => {
  commentStore.loadSharedFlowObjFn?.(src)
  window.location.href = "#flowGraph";
};
</script>

<template>
  <UCard id="postComment" class="mt-4">
    <h2 class="text-lg font-semibold">
      发表评论
    </h2>
    <div class="flex flex-row">
      <UTextarea
        v-model="comment.text"
        placeholder="请输入评论内容"
        class="mt-2 w-3/4 min-h-[90px]"
      />
      <div v-if="withFlow" class="pl-4 mt-2">
        <p>引用的流程图</p>
        <p class="flex flex-col items-center">
          <ULink
            :active-class="tw`text-blue-500`.join(' ')"
            :inactive-class="
              tw`text-red-400 dark:text-gray-400 hover:text-pink-400 dark:hover:text-gray-200`.join(
                ' ',
              )
            "
            @click="/* doJumpToFlow */ console.log('doJumpToFlow')"
          >
            发送#流程图#
          </ULink>
          <UButton size="sm" color="yellow" class="w-1/2 flex justify-center" @click="commentStore.doClearSharedFlowObj">
            取消
          </UButton>
        </p>
      </div>
    </div>
    <UButton class="mt-2" @click="addComment">
      发表评论
    </UButton>
    <UDivider class="m-2 mt-4" />
    <h2 class="text-lg font-semibold">
      评论区
    </h2>

    <div class="mt-2">
      <template v-if="comments.length === 0">
        <div class="min-h-[72px]">
          <div class="flex flex-col items-center">
            <UIcon
              name="i-fluent:calendar-empty-32-regular"
              class="h-[36px] w-[36px]"
            />
            <p class="font-semibold">
              暂无评论
            </p>
          </div>
        </div>
      </template>
      <template v-else>
        <UCard
          v-for="c in comments"
          :key="c.ciid"
          class="my-2 min-h-[72px] border-2 border-transparent hover:border-green-500"
          :ui="{
            body: {
              padding: '',
            },
          }"
        >
          <div class="px-3 pt-4 flex justify-between">
            <div class="inline">
              <span> #{{ c.ciid }} </span>&nbsp;
              <strong>{{ userStore.data.nickname }}: </strong>
            </div>
            <strong>{{ c.post_date }}</strong>
          </div>
          <UDivider class="m-2" />
          <div class="p-4">
            <p>{{ c.text }}</p>
          </div>
          <div class="p-4 flex justify-between">
            <button @click.once="comments[c.ciid - 1].like++">
              <UBadge color="blue">
                <UIcon name="i-icon-park-outline:thumbs-up" />
                点赞&nbsp;{{ c.like }}
              </UBadge>
            </button>
            <!-- 流程图 -->
            <span v-if="comments[c.ciid - 1].with_flow">
              <UTooltip text="点击引用">
                <ULink
                  :active-class="tw`text-blue-500`.join(' ')"
                  :inactive-class="
                    tw`text-red-400 dark:text-gray-400 hover:text-pink-400 dark:hover:text-gray-200`.join(
                      ' ',
                    )
                  "
                  @click="() => doJumpToFlow(comments[c.ciid - 1].flow! as FlowExportObject)"
                >
                  #流程图#
                </ULink>
              </UTooltip>
            </span>
          </div>
        </UCard>
      </template>
    </div>
  </UCard>
</template>

<style></style>
